<!--
 * @Author: RAY_HUI 1541917867@qq.com
 * @Date: 2025-07-07 09:38:42
 * @LastEditors: RAY_HUI 1541917867@qq.com
 * @LastEditTime: 2025-08-04 17:45:37
 * @FilePath: \website-reconstruction---vue\src\views\Home.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->

<script setup lang="ts">
// 导入组件
import MainBanner from '@/components/sections/home/MainBanner.vue'
import AgentSlider from '@/components/sections/home/AgentSlider.vue'
import AboutSection from '@/components/sections/home/AboutSection.vue'
import ProductCategories from '@/components/sections/home/ProductCategories.vue'
import ServicesSection from '@/components/sections/home/ServicesSection.vue'
import WhyChooseUs from '@/components/sections/home/WhyChooseUs.vue'
import BlogSection from '@/components/sections/home/BlogSection.vue'
import Header from '@/components/layout/Header.vue'
import Footer from '@/components/layout/Footer.vue'
import ProductApplications from '@/components/sections/home/ProductApplications.vue'
import { computed, onMounted, ref, watch } from 'vue'

import { getPartContentVoTranslatelist } from '@/api/xyybackend/getVoList.js'
import {
  PartContentVo,
  PartTitleVo,
  ReturnResult,
} from '@/types/selfdefine/Layout'
import { useLangStore } from '@/stores/langStore'
import { storeToRefs } from 'pinia'
// ✅ 1. 获取响应式语言
const langStore = useLangStore()
const { currentLang } = storeToRefs(langStore)

// ✅ 2. 异步数据存储（原始数据）
const rawData = ref<PartTitleVo[] | null>(null)

// ✅ 3. 模拟异步加载（可以用 onMounted，也可以用 watchEffect）
onMounted(async () => {
  try {
    const res = await getPartContentVoTranslatelist({ lang: 'en' })
    rawData.value = res.rows // ✅ 一旦 rawData 变，computed 就会重新计算
  } catch (err) {
    console.error('获取数据失败:', err)
    rawData.value = []
  }
})

const dataKey = ref()
// ✅ 4. 核心：computed 自动处理翻译 & 结构转换
const allData = computed(() => {
  if (!rawData.value || !Array.isArray(rawData.value)) return {}

  const dataMap: Record<
    number,
    {
      partTitle: string
      content: string
      partContentVoList: PartContentVo[]
    }
  > = {}
  rawData.value.forEach((row) => {
    // console.log('[computed] currentLang =', currentLang.value) // 🔥 打印看看
    // 🔁 所有字段都根据 currentLang.value 动态选择
    const partTitle =
      currentLang.value === 'en' && row.partTitleTranslate
        ? row.partTitleTranslate
        : row.partTitle

    const content =
      currentLang.value === 'en' && row.contentTranslate
        ? row.contentTranslate
        : row.content

    const partContentVoList = (row.partContentVoList || []).map((item) => ({
      ...item,
      content:
        currentLang.value === 'en' && item.contentTranslate
          ? item.contentTranslate
          : item.content,
      title:
        currentLang.value === 'en' && item.titleTranslate
          ? item.titleTranslate
          : item.title,
    }))

    dataMap[row.id] = { partTitle, content, partContentVoList }
  })

  return dataMap
})
</script>
<template>
  <!-- 页眉 -->
  <Header />
  <!-- 1. 主轮播图部分 -->
  <MainBanner />

  <!-- 2. 代理品牌展示 -->

  <AgentSlider :data="allData[1]" v-if="allData[1]" />

  <!-- 3. 关于SIMAS部分 -->
  <AboutSection :dataInfo="allData[2]" v-if="allData[2]" />

  <!-- 4. 产品分类展示 -->
  <ProductCategories :data="allData[3]" v-if="allData[3]" />
  <!-- 产品主要用途 -->
  <ProductApplications :data="allData[6]" v-if="allData[6]" />
  <!-- 5. 我们的服务 -->
  <ServicesSection :data="allData[4]" v-if="allData[4]" />

  <!-- 6. 为什么选择我们 -->
  <WhyChooseUs :data="allData[5]" v-if="allData[5]" />

  <!-- 7. 最新博客文章 -->
  <BlogSection :data="allData[7]" v-if="allData[7]" />
  <!-- 页脚  -->
  <Footer />
</template>
